<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="..\css\style.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/myscript.js"></script>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/velocity.js"></script>
    <script src="../js/shutter.js"></script>
    <script>
    $(function () {
      $('.shutter').shutter({
        // shutterW: 1520, // 容器宽度
        // shutterH: 500, // 容器高度
        isAutoPlay: true, // 是否自动播放
        playInterval: 1000, // 自动播放时间
        curDisplay: 3, // 当前显示页
        fullPage: false // 是否全屏展示
      });
    });
    </script>
</head>
<body>
    <div class="top">
        <div class="content">
            <div class="left">
                <img src="..\image\logo.png" alt="" width="130px" height="60px">
            </div>
            <div class="min">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">发现</a>
                        <div class="menu_list">
                            <p>列表1</p>
                            <p>列表2</p>
                            <p>列表3</p>
                            <p>列表4</p>
                        </div>
                    </li>
                    <li><a href="">同城</a>  
                        <div class="menu_list">
                            <p>列表1</p>
                            <p>列表2</p>
                            <p>列表3</p>
                            <p>列表4</p>
                        </div>
                    </li>
                    <li><a href="">职位</a>
                        <div class="menu_list">
                                <p>列表1</p>
                                <p>列表2</p>
                                <p>列表3</p>
                                <p>列表4</p>
                            </div>
                    </li>
                    <li><a href="">活动</a>
                        <div class="menu_list">
                                <p>列表1</p>
                                <p>列表2</p>
                                <p>列表3</p>
                                <p>列表4</p>
                            </div>
                    </li>
                    <li><a href="">正版素材</a>
                        <div class="menu_list">
                                <p>列表1</p>
                                <p>列表2</p>
                                <p>列表3</p>
                                <p>列表4</p>
                            </div>
                    </li>
                    <li><a href="">课程</a>
                        <div class="menu_list">
                                <p>列表1</p>
                                <p>列表2</p>
                                <p>列表3</p>
                                <p>列表4</p>
                            </div>
                    </li>
                    <li><img src="..\image\更多.png" alt="" ></li>
                </ul>
            </div>
            <div class="right">
                 <span>注册</span>
                <span>|</span>
                <span>登录</span>
                <img src="..\image\上传.png" alt="" width="30px" height="30px">
                <img src="..\image\搜索.png" alt="" width="25px" height="25px">
            </div>
        </div>
    </div>



    <div class="rotation">
        <div class="shutter">
            <div class="shutter-img">
              <a href="#" data-shutter-title="Iron Man"><img src="../image/banner1.png" width="100%" height="350" alt="#"></a>
              <a href="#" data-shutter-title="Super Man"><img src="../image/banner2.png" width="100%" height="350" alt="#"></a>
              <a href="#" data-shutter-title="The Hulk"><img src="../image/banner3.png"  width="100%" height="350" alt="#"></a>
               <a href="#" data-shutter-title="The your"><img src="../image/banner4.jpg" width="100%" height="350" alt="#"></a>
            </div>
            <ul class="shutter-btn">
              <li class="prev"></li>
              <li class="next"></li>
            </ul>
            </div>
        <div class="responsive">
            <div class="banner-bottom1">
                <a href="#" ><img src="../image/banner-bottom1.jpg" ></a>
            </div>
            <div class="banner-bottom2">
                <a  href="#" ><img src="../image/banner-bottom2.jpg" ></a>
            </div>
            <div class="banner-bottom3">
                <a  href="#" ><img src="../image/banner-bottom3.jpg" ></a>
            </div>
            <div class="banner-bottom4">
                <a  href="#"><img src="../image/banner-bottom4.jpg" ></a>
            </div>
            <div class="banner-bottom5">
                <a href="#" ><img src="../image/banner-bottom5.jpg" ></a>
            </div>
        </div>
        </div>

</body>
</html>